<template>
  <div id="building">
    <!-- 顶部导航 -->
    <topNav />
    <!-- 轮播图加表单 -->
    <div class="form">
      <MySwiper />
      <Login />
    </div>
    <!-- 分类 -->
    <div class="cate">
      <cateList
        :cateList="cateList"
        ref="cateList"
        @cateTitle="cateTitle"
      ></cateList>
    </div>
    <div class="cateDetail">
      <!-- 品牌 -->
      <div class="cateDetail-left">
        <div class="cateDetail-title">
          <div>{{ cateDetail.title }}</div>
        </div>
        <div
          class="cateDetail-type"
          v-for="(item, index) in cateDetail.types"
          :key="index"
        >
          <div
            :class="['type-name', index === active ? 'active' : '']"
            @click="tabName(index)"
          >
            {{ item }}
          </div>
          <el-divider></el-divider>
        </div>
        <div
          style="
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 100%;
        "
        >
          <img
            src="../../static/down.png"
            style="width: 30%; height: 30%"
          />
        </div>
      </div>
      <!-- 品牌商品 -->
      <div class="cateDetail-right">
        <div class="tab-left">
          <img src="../../static/left.png" />
        </div>
        <div class="cateGoods">
          <div
            class="cateGoods-item"
            v-for="(item, index) in cateGoods"
            :key="index"
            @click="toGoodsDetail(item)"
          >
            <div class="cateGoods-img">
              <el-image :src="item.img" fit="cover" lazy></el-image>
            </div>
            <div class="cateGoods-title">
              {{ item.name }}
            </div>
            <div class="cateGoods-price">￥{{ item.price }}天/起</div>
          </div>
        </div>
        <div class="tab-right">
          <img src="../../static/right.png" />
        </div>
      </div>
    </div>
    <!-- 活动 -->
    <div class="activity">
      <div class="activity-left">
        <div class="activity-title" style="writing-mode: tb-rl">首月五折</div>
        <div class="activity-list">
          <div
            class="activity-item"
            v-for="(item, index) in pointFive"
            :key="index"
            :style="
              (index + 1) % 2 === 0 && index !== 0 ? { marginRight: 0 } : null
            "
            @click="toGoodsDetail(item)"
          >
            <div class="activity-img">
              <el-image :src="item.img" lazy fit="cover"></el-image>
            </div>
            <div class="activity-name">
              {{ item.name }}
            </div>
            <div class="activity-price">￥{{ item.price }}天/起</div>
          </div>
        </div>
      </div>

      <div class="activity-right">
        <div class="activity-title" style="writing-mode: tb-rl">首月一折</div>
        <div class="activity-list">
          <div
            class="activity-item"
            v-for="(item, index) in pointFive"
            :key="index"
            :style="
              (index + 1) % 2 === 0 && index !== 0 ? { marginRight: 0 } : null
            "
            @click="toGoodsDetail(item)"
          >
            <div class="activity-img">
              <el-image :src="item.img" lazy fit="cover"></el-image>
            </div>
            <div class="activity-name">
              {{ item.name }}
            </div>
            <div class="activity-price">￥{{ item.price }}天/起</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品卡片 -->
    <div>
      <goodsCard :goodsList="goodsList"></goodsCard>
    </div>
    <!-- 底部商标 -->
    <div>
      <MyBottom></MyBottom>
    </div>
  </div>
</template>

<script>
import goodsCard from "../components/goodsCard.vue";
import cateList from "../components/cateList.vue";
import MyBottom from "../components/bottom.vue";
import topNav from "../components/topNav.vue";
import MySwiper from "../components/MySwiper.vue";
import Login from "../components/LogIn.vue";
export default {
  name: 'index',
  components: {
    goodsCard,
    cateList,
    MyBottom,
    topNav,
    MySwiper,
    Login,
  },
  mounted() {},
  data() {
    return {
      active: 0,
      search: ["iphone14", "oppo", "vivo", "华为P50"],
      goodsList: [
        {
          id: 1,
          goodsImg: "../../static/iphone.jpg",
          title:
            "iPhone14 Pro Max 国行5G 移动联通电信 双卡双待手机, 快来看看吧",
          typeList: ["全新", "包邮", "可买断"],
          price: 1.97,
          discount: 0.03,
          firstMon: 1,
        },
        {
          id: 2,
          goodsImg: "../../static/iphone.jpg",
          title:
            "iPhone14 Pro Max 国行5G 移动联通电信 双卡双待手机, 快来看看吧",
          typeList: ["全新", "包邮", "可买断"],
          price: 1.97,
          discount: 0.03,
          firstMon: 1,
        },
        {
          id: 3,
          goodsImg: "../../static/iphone.jpg",
          title:
            "iPhone14 Pro Max 国行5G 移动联通电信 双卡双待手机, 快来看看吧",
          typeList: ["全新", "包邮", "可买断"],
          price: 1.97,
          discount: 0.03,
          firstMon: 1,
        },
        {
          id: 4,
          goodsImg: "../../static/iphone.jpg",
          title:
            "iPhone14 Pro Max 国行5G 移动联通电信 双卡双待手机, 快来看看吧",
          typeList: ["全新", "包邮", "可买断"],
          price: 1.97,
          discount: 0.03,
          firstMon: 1,
        },
        {
          id: 5,
          goodsImg: "../../static/iphone.jpg",
          title:
            "iPhone14 Pro Max 国行5G 移动联通电信 双卡双待手机, 快来看看吧",
          typeList: ["全新", "包邮", "可买断"],
          price: 1.97,
          discount: 0.03,
          firstMon: 1,
        },
      ],
      pointFive: [
        {
          id: 0,
          img: "../../static/iphone.jpg",
          name: "iphone 14 Plus",
          price: 15.34,
        },
        {
          id: 1,
          img: "../../static/iphone.jpg",
          name: "iphone 14 Plus",
          price: 15.34,
        },
        {
          id: 2,
          img: "../../static/iphone.jpg",
          name: "iphone 14 Plus",
          price: 15.34,
        },
        {
          id: 3,
          img: "../../static/iphone.jpg",
          name: "iphone 14 Plus",
          price: 15.34,
        },
      ],
      cateList: [
        { img: "../../static/cate/cate01.png", title: "品牌手机" },
        { img: "../../static/cate/cate02.png", title: "电脑设备" },
        { img: "../../static/cate/cate03.png", title: "游戏电玩" },
        { img: "../../static/cate/cate05.png", title: "娱乐影音" },
        { img: "../../static/cate/cate04.png", title: "企业设备" },
        { img: "../../static/cate/cate06.png", title: "手表饰品" },
        { img: "../../static/cate/cate07.png", title: "家电家居" },
        { img: "../../static/cate/cate08.png", title: "数码摄像" },
        { img: "../../static/cate/cate09.png", title: "户外装备" },
        { img: "../../static/cate/cate10.png", title: "母婴用品" },
      ],
      cateDetail: {
        title: "品牌手机",
        types: ["苹果", "华为", "OPPO", "vivo", "小米", "荣耀", "真我"],
      },
      cateGoods: [
        {
          id: 0,
          img: "../../static/iphone.jpg",
          name: "iphone 14 Plus",
          price: 15.34,
        },
        {
          id: 1,
          img: "../../static/iphone.jpg",
          name: "iphone 14 Plus",
          price: 15.34,
        },
        {
          id: 2,
          img: "../../static/iphone.jpg",
          name: "iphone 14 Plus",
          price: 15.34,
        },
        {
          id: 3,
          img: "../../static/iphone.jpg",
          name: "iphone 14 Plus",
          price: 15.34,
        },
        {
          id: 4,
          img: "../../static/iphone.jpg",
          name: "iphone 14 Plus",
          price: 15.34,
        },
        {
          id: 5,
          img: "../../static/iphone.jpg",
          name: "iphone 14 Plus",
          price: 15.34,
        },
        {
          id: 6,
          img: "../../static/iphone.jpg",
          name: "iphone 14 Plus",
          price: 15.34,
        },
        {
          id: 7,
          img: "../../static/iphone.jpg",
          name: "iphone 14 Plus",
          price: 15.34,
        },
      ],
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 获取页面滚动距离
    handleScroll(event) {
      // 变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 变量windowHeight是可视区的高度
      let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 变量scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
      // 滚动条到底部的条件
      if (scrollTop + windowHeight === scrollHeight) {
        console.log("触底了")
      }
    },
    tabName(index) {
      this.active = index;
    },
    cateTitle() {
      this.cateDetail.title = this.$refs.cateList.list[0].title;
    },
    toGoodsDetail(item) {
      this.$router.push({
        path: '/goodsDetail',
        query: {
          detail: item
        }
      })
    }
  },
};
</script>

<style scoped>
.form {
  position: relative;
  width: 70%;
  left: 50%;
  margin-top: 1%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  }
.activity,
.cateDetail {
  margin-top: 0.1rem;
  width: 70%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.activity-left,
.activity-right {
  width: 49.5%;
  border-radius: 0.1rem;
  background-color: rgb(244, 244, 244);
  display: flex;
}
.activity-title {
  padding: 6%;
  color: #fff;
  background-color: rgb(229, 0, 18);
  border-radius: 0.1rem 0 0 0.1rem;
  font-size: 0.18rem;
  height: auto;
}
.activity-right {
  margin-left: 1%;
}
.activity-list {
  padding: 2%;
  display: flex;
  flex-wrap: wrap;
}
.activity-item {
  margin-right: 1.8%;
  width: 45%;
  padding: 2%;
  background-color: #fff;
  margin-top: 2%;
  cursor: pointer;
}
.activity img {
  width: 100%;
  height: 100%;
}
.cateDetail {
  background-color: rgb(244, 244, 244);
  border-radius: 0.1rem;
}
.cateDetail-left {
  width: 20%;
  background-color: #fff;
  border-radius: 0.1rem 0 0 0.1rem;
}
.cateDetail-title {
  background-color: rgb(229, 0, 18);
  color: #fff;
  font-size: 0.15rem;
  font-weight: 350;
  border-radius: 0.1rem 0 0 0;
  padding: 15% 0 10% 20%;
  position: relative;
}
.type-name {
  margin-left: 20%;
  padding: 7% 0;
  font-size: 0.15rem;
}
.el-divider {
  margin: 0;
}
.cateDetail-right {
  width: 80%;
  padding: 0;
  background-color: rgb(244, 244, 244);
  border-radius: 0 0.1rem 0.1rem 0;
  display: flex;
  align-items: center;
}
.tab-left,
.tab-right {
  width: 5%;
  display: flex;
}
.tab-left img,
.tab-right img {
  height: 100%;
  width: 100%;
}
.cateGoods {
  display: flex;
  width: 90%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.cateGoods-item {
  width: 24.5%;
  box-sizing: border-box;
  padding: 1% 2%;
  background-color: #fff;
  cursor: pointer;
}
.cateGoods-img img {
  width: 100%;
  height: 100%;
}
.cateGoods-price,
.activity-price {
  color: #ff0000;
}
.cateGoods-title,
.activity-name {
  color: #999;
}
.cateDetail-title:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-right: solid 0.4rem transparent;
  border-left: solid 0.4rem transparent;
  border-bottom: solid 0.4rem rgb(229, 0, 18);
  top: -29%;
  left: 48%;
}
.active {
  position: relative;
}
.active:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: solid 0.2rem transparent;
  border-right: solid 0.2rem rgb(244, 244, 244);
  border-bottom: solid 0.2rem transparent;
  top: 5%;
  left: 91%;
}
</style>